/*
 * @Author: wuhao930406 1148547900@qq.com
 * @Date: 2023-10-07 15:59:19
 * @LastEditors: wuhao930406 1148547900@qq.com
 * @LastEditTime: 2023-10-12 17:14:39
 * @FilePath: /legion-iot/src/pages/dashboard/components/Safe.jsx
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
 */
import React, { useState, useEffect } from "react";
import ReactECharts from "echarts-for-react";
import * as echarts from "echarts";
import { Progress } from "antd";
import styles from "./index.less";

const color = {
  优: ["#3acafa", "#6666ff"],
  良: ["#a4e7fe", "#3acafa"],
  中: ["#e2ee05", "#ffaa69"],
  差: ["#ffaa69", "#ff4800"],
};

function Safe({ data }) {
  var percent = data?.score ;
  const cur = {};

  const text =
    percent < 30 ? "差" : percent < 50 ? "中" : percent < 80 ? "良" : "优";

  return (
    <div style={{ flex: 1, overflow: "hidden" }}>
      <div style={{ marginTop: 50 }}>
        <div
          className={styles.ledgen}
          style={{ "--color": color[text]?.[0], "--colors": color[text]?.[1] }}
        >
          <div className={styles.centers}>
            <span>差</span>
            <span>中</span>
            <span>良</span>
            <span>优</span>
          </div>

          <div className={styles.active} style={{ left: percent + "%" }}>
            <b>{text}</b>
          </div>

          <div
            className={styles.activebar}
            style={{ left: percent + "%" }}
          ></div>
        </div>
        <Progress
          strokeColor={{
            "0%": color[text]?.[0],
            "100%": color[text]?.[1],
          }}
          percent={percent}
          status="active"
          showInfo={false}
          strokeWidth={14}
          style={{ borderRadius: 2 }}
        />
      </div>
      <div
        style={{
          whiteSpace: "pre-wrap",
          paddingTop: 12,
          fontSize: 14,
          lineHeight:2
        }}
      >
        建筑面积: {data?.area ?? 0}万平方米
        <br />
        建筑位置: {data?.location ?? 0}个
        <br />
        建筑数量: {data?.num ?? 0}个
        <br />
        物业电话: {data?.telephone ?? "-"}
        <br />
      </div>
    </div>
  );
}

{
  /* <Card
className="diys"
style={{ flex: 1, padding: 12 }}
title={'电动自行车安全风险评估'}
>

</Card> */
}

export default Safe;
